<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image :src="'https://ba.fuliaoxx.com'+info.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="" style="padding: 20rpx;">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;">
					<view class="" style="color: #FF4E31;font-size: 42rpx;">
						¥{{info.price}}
					</view>
					<text
						style="color: #b5b5b5;margin-left: 20rpx;text-decoration: line-through;">¥{{info.old_price}}</text>
				</view>
				<view class="" style="color: #75D65E;font-size: 24rpx;">
					{{info.distance}}km
				</view>
			</view>
			<view class="" style="margin: 20rpx 0;font-size: 34rpx;">
				{{info.name}}
			</view>
			<view class="tips" style="display: flex;align-items: center;">
				<view class="tip">
					{{info.score}}分
				</view>
				<!-- 				<view class="tip tip2">
					已认证
				</view> -->
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 26rpx;" @click="show=true">
				<view class=""
					style="color: #999999;padding-right: 20rpx;border-right: 1rpx solid #999999;margin-right: 20rpx;">
					选择
				</view>
				<view class="" style="flex: 1;display: flex;align-items: center;justify-content: space-between;">
					选择商品规格
					<u-icon name="arrow-right" color="##999999" size="14"></u-icon>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 26rpx;">
				<view class=""
					style="color: #999999;padding-right: 20rpx;border-right: 1rpx solid #999999;margin-right: 20rpx;">
					地址
				</view>
				<view class="" style="flex: 1;display: flex;align-items: center;justify-content: space-between;">
					{{info.address}}
				</view>
			</view>
		</view>
		<view class="" style="text-align: center;padding: 40rpx;border-top: 1rpx solid #dddddd;margin-top: 30rpx;">
			————店铺详情—————
		</view>
		<image :src="'https://ba.fuliaoxx.com'+info.detail_image" mode="widthFix"
			style="width: 100%;margin-top: 20rpx;">
		</image>
		<view class="" style="height: 100rpx;">

		</view>
		<view class="footer">
			<!-- 			<view class="icon">
				<image src="../../static/uni.png" mode="widthFix"></image>
				<view class="">
					关注
				</view>
			</view> -->
			<view class="btn" @click="show=true">
				立即下单
			</view>
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom">
			<view class="box">
				<view class="close" @click="show=false">
					<u-icon name="close"></u-icon>
				</view>
				<view class="header">
					<image :src="'https://ba.fuliaoxx.com'+nowValue.image" mode=""></image>
					<view class="detail">
						<view class="" style="color: #DE4E4A;font-weight: 600;font-size: 40rpx;">
							￥{{nowValue.price}}
						</view>
						<view class="" style="color: #626262;">
							{{nowValue.name}}
						</view>
						<u-number-box v-model="value"></u-number-box>
					</view>
				</view>
				<view class="content">
					<view class="" style="margin-bottom: 20rpx;">
						选择规格
					</view>
					<view class="items">
						<view :class="item.id==nowValue.id?'item active':'item'" v-for="(item,index) in list"
							:key="index" @click="choose(item)">
							<image :src="'https://ba.fuliaoxx.com'+item.image" mode=""></image>
							<view class="">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="btn" @click="toBuy">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGoodsByShop
	} from "@/request/api/home.js"
	export default {
		data() {
			return {
				show: false,
				value: 1,
				info: {},
				list: [],
				nowValue: {}
			}
		},
		async onLoad(opt) {
			this.info = JSON.parse(opt.item)
			let res = await getGoodsByShop({
				id: this.info.id
			});
			this.list = res.data;
			this.nowValue = this.list.length > 0 ? this.list[0] : {}
		},
		methods: {
			toBuy() {
				uni.navigateTo({
					url: `/pages/buy/buy?item=${JSON.stringify(this.nowValue)}&num=${this.value}&shopName=${this.info.name}`
				})
			},
			choose(item) {
				if (this.nowValue.id == item.id) return;
				this.nowValue = item;
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	swiper {
		height: 660rpx;
	}

	* {
		box-sizing: border-box;
	}

	.box {
		position: relative;
		height: 80vh;
		padding: 20rpx;
		border-radius: 20rpx;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.btn {
			position: absolute;
			bottom: 20rpx;
			text-align: center;
			background-color: #75D65E;
			padding: 26rpx 0;
			border-radius: 14rpx;
			width: 90%;
			left: 5%;
		}

		.content {
			padding: 20rpx 0;

			.items {
				display: flex;
				justify-content: space-between;

				.item {
					width: 45%;
					display: flex;
					align-items: center;
					background-color: #F5F5F5;
					padding: 10rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
					border: 1rpx solid #F5F5F5;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.active {
					border: 1rpx solid #54C439;
				}
			}
		}

		.header {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F1F1F1;
			padding-bottom: 20rpx;

			image {
				width: 190rpx;
				height: 190rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.detail {
				height: 190rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}

	.tips {
		.tip {
			font-size: 22rpx;
			padding: 0 14rpx;
			border-radius: 10rpx;
			color: #54C439;
			margin-right: 10rpx;
			background-color: rgba(118, 252, 118, 0.3);
		}

		.tip2 {
			color: #FBB403;
			background-color: rgba(252, 171, 72, 0.3);
		}
	}

	.footer {
		position: fixed;
		padding: 40rpx 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		background-color: white;
		// padding: 20rpx;
		width: 100%;
		justify-content: center;

		.icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;

			image {
				width: 36rpx;
			}
		}

		.btn {
			width: 90% !important;
			text-align: center;
			background-color: #75D65E;
			padding: 26rpx 0;
			border-radius: 14rpx !important;
		}

	}

	.swiper-item {
		height: 660rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>